<template>
  <el-menu
    class="menu-bar"
    :default-active="$route.path"
    :unique-opened="true"
    router
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
    :background-color="color.barColor"
    :text-color="color.textColor"
    :active-text-color="color.activeTextColor"
  >
    <!--希望菜单根据用户的权限来自动生成！-->
    <MenuItem :menuList="menuList"></MenuItem>
  </el-menu>
</template>

<script>
import MenuItem from "./MenuItem.vue";
import { mapState } from "vuex";
export default {
  props: ["color"],

  name: "MenuBar",
  components: {
    MenuItem,
  },
  computed: {
    ...mapState({
      menuList: (state) => state.MenuStore.menu_data,
      isCollapse: (state) => state.MenuStore.isCollapse,
    }),
    //   ...mapState({
    //       //tabs选项卡数据
    //       editableTabs: state => state.MenuStore.tabs,
    //       //当前激活的选项卡
    //     //   editableTabsValue: state => state.MenuStore.editableTabsValue
    //   }),
    //当前激活的选项卡
    editableTabsValue: {
      get() {
        return this.$store.state.MenuStore.editableTabsValue;
      },
      set(val) {
        this.$store.state.MenuStore.editableTabsValue = val;
      },
    },
  },
  data() {
    return {
      //  barColor:"#101010",
      //  textColor:"#fff",
      //  activeTextColor:"#38b8f4"
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped>
/* .menu-bar {
  width: 200px;
  height: 565px;
} */
</style>